<template>
    <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="角色名称查询">
        <el-input v-model="formInline.name" placeholder="请输入角色名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="preAddObject">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="100"></el-table-column>
      <el-table-column prop="bz" label="备注" width="200"></el-table-column>
      <el-table-column prop="name" label="名称" width="200"></el-table-column>
      <el-table-column prop="menuStr" label="菜单" width="500"></el-table-column>
      <el-table-column label='操作' width="250">
        <template slot-scope="scope">
          <el-button @click="preUpdateObject(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="preAuthorize(scope.row)" type="primary" size="small">授权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :page-sizes="pageSizes"
      :current-page="formInline.pageNum"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" >
    </el-pagination>
    <!-- 树形控件 授权 -->
    <el-dialog title="授权" :visible.sync="Shouquan">
      <el-tree
        :data="dataTree"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-expanded-keys="checkedKeys"
        :default-checked-keys="checkedKeys"
        :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
          <el-button @click="Shouquan = false">取 消</el-button>
          <el-button type="primary" @click="AuthorizeObject">确定</el-button>
      </div>
    </el-dialog>
    
    </div>
</template>

<script>
export default {
    name:'app',
    data(){
        return{
          formInline:{pageNum:1,pageSize:2},
          tableData: [],
          pageSizes:[2, 3, 5,],
          total:0,
          Shouquan:false,
          dataTree: [],
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          rid:'',
          checkedKeys:[],
        }
    },
    mounted(){
        this.getRole();
    },
    methods: {
        getRole(){
          var $this=this;
          this.axios({
              method:'get',
              url: "http://localhost:9999/system/ecRole/roleList",
              params:this.formInline
          }).then(function(res){
              console.log("查询角色列表返回的数据：{}",res);
              $this.tableData=res.data.obj.list;
              $this.total=res.data.obj.total;
          });
        },
        handleCurrentChange(val){
          console.log(`当前页: ${val}`);
          this.getRole();
          this.formInline.pageNum=val;
        },
        handleSizeChange(val){
          console.log(`每页 ${val} 条`);
          this.getRole();
          this.formInline.pageSize=val;
        },
        onSubmit(){
          this.getRole();
        },
        //点击授权给角色授予权限
        preAuthorize(row){
          this.Shouquan=true;
          //查询所有的菜单选项
          var $this=this;
          this.axios({
            method:'get',
            url: "http://localhost:9999/system/ecMenu/selectMents",
          }).then(function(res){
            console.log("查询所有的菜单返回数据为:{}",res);
            $this.dataTree=res.data.obj;
          });

          //查询已拥有的菜单中间表
          this.rid=row.id;
          console.log("查询已拥有菜单的需要的rid为:{}",this.rid)
          this.axios({
            method:'get',
            url: "http://localhost:9999/system/ecMenu/selectMentRoleByRid",
            params:{rid:this.rid}
          }).then(function(res){
            console.log("查询已拥有的菜单id返回数据为:{}",res);
            $this.checkedKeys=res.data.obj;
          });
        },
        //授权点击确定更新权限
        AuthorizeObject(){
          console.log(this.$refs.tree.getCheckedKeys());
          console.log("rid:",this.rid);
          var $this=this;
          this.axios({
              method:'post',
              url: "http://localhost:9999/system/ecRoleMenu/shouquanUpdate",
              data:{rid:this.rid,menuIdList:this.$refs.tree.getCheckedKeys()}
            }).then(function(res){
              console.log("修改角色授权的菜单...",res);
              $this.$message({
                message: res.data.msg,
                type: 'success'
              });
              $this.Shouquan=false;
              $this.getRole();
            });
        },
        preAddObject(){
          alert("此功能暂未开放");
        },
        preUpdateObject(){
          alert("此功能暂未开放");
        }
    }
}
</script>
<style>
  h1{
    text-align: center;
  }
</style>